<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- <form action="" method="post" enctype="application/x-www-form-urlencoded"></form> -->
    <h1>先添加数据在获取数据</h1>
    <button class="btn2">添加用户到数据库</button>
    <script>
      /* 
            发送post请求 ，在原生ajax里 找到 post和 get的区别 
            1.method   2.参数传递 ：get 是地址栏 传参 。post 通过send发送请求体传参
            3.post 需要设置 请求头部
        
        */

      class Jq {
        ajax(options) {
          return new Promise((resolve) => {
            let {
              url = "",
              method = "get",
              data = {},
              dataType = "json",
              success = function () {},
            } = options;
            let str = this.#o2s(data);
            if (method === "get") {
              url = url + "?" + str;
            }
            let xhr = new XMLHttpRequest();
            xhr.open(method, url);
            if (method == "get") {
              xhr.send();
            } else {
              xhr.setRequestHeader(
                "Content-Type",
                "application/x-www-form-urlencoded"
              );
              xhr.send(str);
            }

            xhr.onload = function () {
              if (xhr.status >= 200 && xhr.status < 300) {
                if (dataType == "text") {
                  success(xhr.responseText);
                  resolve(xhr.responseText);
                } else {
                  success(JSON.parse(xhr.responseText));
                  resolve(JSON.parse(xhr.responseText));
                }
              }
            };
          });
        }

        #o2s(obj) {
          let keys = Object.keys(obj);
          let values = Object.values(obj);
          let arr = keys.map((key, k) => {
            return `${key}=${values[k]}`;
          });
          return arr.join("&");
        }
      }

      let $ = new Jq();

      // 发送ajax请求 ，先添加数据，添加完成之后 ，在获取最新的数据
      document.querySelector(".btn2").onclick = async function () {
        // 回调地狱
        // $.ajax({
        //     method: "get",
        //     url: "/adduser",
        //     data: {
        //         name: "张三333",
        //         age: 20,
        //         gender: "男"
        //     },
        //     success(res) {
        //         // 添加成功之后 在获取最新数据
        //         console.log(res);
        //         $.ajax({
        //             method: "get",
        //             url: "/getusers",
        //             success(res){
        //                 console.log(res);
        //             }
        //         })
        //     }
        // })

        // promise调用
        // 1.链式调用
        // $.ajax({
        //     method: "get",
        //     url: "/adduser",
        //     data: {
        //         name: "张三333",
        //         age: 20,
        //         gender: "男"}
        //     }).then(res => {
        //         console.log(res);
        //         return $.ajax({
        //             method: "get",
        //             url: "/getusers"
        //         })
        //     }).then(res=>{
        //         console.log(res);
        //     })

        // 2.asyc 及await调用
        let res1 = await $.ajax({
          method: "get",
          url: "/adduser",
          data: {
            name: "张三333",
            age: 20,
            gender: "男",
          },
        });
        console.log(res1);
        let res2 = await $.ajax({
          method: "get",
          url: "/getusers",
        });
        console.log(res2);
      };
    </script>
  </body>
</html>
